<template>
  <div>
    <el-container>
      <!-- 顶部区域 -->
      <el-header>
        <div class="header_left">
          <img src="../images/伊利.png" height="60px" width="60px" />
          <span>万事屋管理系统</span>
        </div>
        <div class="header_right">
          <div class="header_right_logout">
            <el-dropdown
              class="user-name"
              trigger="click"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                <!-- {{ username }} -->
                xjd
                <!-- 获得userName()的值 -->
                <i class="el-icon-caret-bottom"></i>
                <!-- element-ui ↓图标icon 字体图标 -->
              </span>
              <!-- 点击字体图标出现下拉框，element-ui下拉框格式写法，详情请参见element-ui官网 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <img src="../images/神乐4.jpg" />
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <div class="aside_top">
            <img src="../images/神乐4.jpg" height="70px" width="70px" /><br />
            <span>xjd</span><br />
            <span>2021.9.28</span>
          </div>
          <el-menu
            :default-active="activePath"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#66b1ff"
            router
            :unique-opened="true"
          >
            <!-- 一级菜单 -->
            <!-- 这里的index如果相同 就会点一个都打开 所以要动态绑定变化 这里用id就行了 一级菜单不需要跳转  -->
            <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
              <template slot="title">
                <i :class="iconObj[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
              
              <!-- 二级菜单 -->
              <!-- 因为要点击实现 又因为规则中路由以index作为path做跳转 所以用后台给的路径赋值 -->
              <el-menu-item 
              :index="'/'+subItem.path" 
              v-for="subItem in item.children" :key="subItem.id"
              @click="saveNavState('/'+subItem.path)">

                <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{subItem.authName}}</span>
              </template>
              </el-menu-item>
             
            </el-submenu>
          </el-menu>

          <!-- <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            style="height: 520px"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="user">
                <i class="el-icon-user"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="product">
              <i class="el-icon-box"></i>
              <span slot="title">产品列表</span>
            </el-menu-item>
            <el-menu-item index="message">
              <i class="el-icon-chat-round"></i>
              <span slot="title">消息中心</span>
            </el-menu-item>
            <el-menu-item index="order">
              <i class="el-icon-setting"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
          </el-menu> -->
        </el-aside>

        <!-- 主要内容 -->
        <el-main>
          <!-- 路由占位符 我在main里面占位了 路由里的东西就能在main显示-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
      activeIndex: "user",
      menulist:[],
      // 这个数组id作为key 图标作为值
      iconObj:{
        '125':'el-icon-user-solid',
        '103':'el-icon-s-platform',
        '101':'el-icon-s-goods',
        '102':'el-icon-s-order',
        '145':'el-icon-picture',
      },
      activePath:'',
    };
  },
  methods: {
    handleCommand(command) {
      // 退出登录事件
      if (command == "logout") {
        // handleCommand函数点击事件，传入command属性上的值
        localStorage.removeItem("userName"); // 从localStorage中移除userName键的值
        window.sessionStorage.clear();
        this.$router.push("/hello"); // 新增一个路由界面，即立即跳转到根目录
      }
    },
    //获取左边菜单数据 第二行是解构，将data的值赋给res
    async getMenuList(){
      const{data:res}=await this.$http.get('menus')
      if(res.meta.status !== 200)return this.$message.error(res.meta.msg)
      this.menulist = res.data
    },
    saveNavState(activePath){
      window.sessionStorage.setItem('activePath',activePath)
      this.activePath = activePath
    },
  },
   

    created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem('activePath')
  },
};
</script>

<style scoped>

.header_left {
  float: left;
  width: 260px;
  height: 60px;
}
.header_left span {
  width: 200px;
  height: 60px;
  text-align: center;
  font-size: 25px;
  line-height: 60px;
  float: left;
  font-family: unset;
  font-weight: bold;
}

.header_left img {
  float: left;
}
.aside_top {
  /* height: 150px; */
  line-height: 20px;
  padding: 20px;
}
.aside_top span {
  color: #ffffff;
  font-family: Microsoft YaHei;
  font-size: 14px;
}
.aside_top img {
  /* margin: 30px; */
  height: 80px;
  width: 80px;
  border-radius: 50%;
  /* padding: 1px; */
  background-color: #fff;
}
/* ------------------------------------- */
.header_right {
  float: right;
  width: 260px;
  height: 60px;
  margin-right: 20px;
}
.header_right img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #fff;
  float: right;
  margin-top: 10px;
}
.header_right_logout {
  float: right;
  margin-top: 15px;
  padding: 5px;
}

.el-header,
.el-footer {
  background-color: #d3dce6;
  color: #333;
  /* text-align: center; */
  /* line-height: 60px; */
}

.el-aside {
  background-color: rgb(84, 92, 100);
  color: #333;
  text-align: center;
  line-height: 100px;
  width: 160px !important;
  height: 661px;
}
.el-aside .el-menu{
    border-right: none;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  /* text-align: center; */
  /* line-height: 600px; */
  padding: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
